import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, theme, Divider, Modal, Radio, Table, Space, Tag, Checkbox, Pagination, Switch, message } from 'antd';
import React, { useState, useEffect, useContext } from 'react';
import MyContext from '../../../utils/myContext'
import http from '../../../utils/fetchHttp'


const { Option } = Select;// ---表单的内容

const App = () => {
    const store = useContext(MyContext)

    const { token } = theme.useToken();
    const listStyle = {
        textAlign: 'center',
        background: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
        marginTop: 16,
    };

    // 搜索表单
    const [form] = Form.useForm();
    const [expand, setExpand] = useState(false);
    const formStyle = {
        maxWidth: 'none',
        background: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
        padding: 10,
    };

    // 点击筛选后的数据及请求
    const onFinish = (values) => { 
        if (values.productName == undefined) {
            values.productName = ""
        }
        console.log(values);
        http({
            url: '/product/quiteProduct1',
            method: 'post',
            data: values,
        }).then(res => {
            if (res.code === 200) {
                //获取成功
                // res.data
                message.success(res.msg)
                for (let i = 0; i < res.data.length; i++) {
                    for (let j = 0; j < store.productClassify1.length; j++) {
                        if (res.data[i].productClassify1 == store.productClassify1[j].classifyID) {
                            res.data[i].productClassify1 = store.productClassify1[j].classifyName
                        }
                    }
                }
                for (let i = 0; i < res.data.length; i++) {
                    for (let j = 0; j < store.productClassify2.length; j++) {
                        if (res.data[i].productClassify2 == store.productClassify2[j].classifyID) {
                            res.data[i].productClassify2 = store.productClassify2[j].classifyName
                        }
                    }
                }
                message.success('查询商品数据成功！');
                console.log(res.data);
                setDataList(res.data)
            }
        }).catch(err => {
            message.error('查询商品数据失败！');
        })
    };

    // ----以下是表格
    // 表格
    const columns = [
        { title: '序号', align: "center", dataIndex: 'index', key: 'index', render: (text, record, index) => index + 1 },
        {
            title: '商品货号',
            align: "center",
            dataIndex: 'productID',
            key: 'productID',
        },
        {
            title: '商品名称',
            align: "center",
            dataIndex: 'productName',

        },
        {
            title: '商品颜色',
            align: "center",
            dataIndex: 'productColor',

        },
        {
            title: '商品尺码',
            align: "center",
            dataIndex: 'productRule',

        },
        {
            title: '条形码',
            align: "center",
            dataIndex: 'productIDCard',

        },
        {
            title: '品牌',
            align: "center",
            dataIndex: 'productBrand',
        },
        {
            title: '库存',
            align: "center",
            dataIndex: 'productNum',
        },
        {
            title: '操作',
            align: "center",
            render: (_, record) => (<Space size="middle">
                <a href="#" onClick={() => {
                    setModalData(record);
                    setIsModalOpen(true);
                }}>修改</a>
            </Space>),
        },
    ];
    //全局提示
    const [messageApi, contextHolder] = message.useMessage();

    const [dataList, setDataList] = useState([]); //表格数据

    //1、获取到所有学生的数据
    useEffect(() => {
        getStu()
    }, [])

    //获取学生数据
    const getStu = () => {
        http({
            url: '/product/getProduct1',
            method: 'get'
        }).then(res => {
            if (res.code === 200) {
                //获取成功
                // res.data
                message.success(res.msg);
                setDataList(res.data)
            }
        }).catch(err => {
            message.error('获取所有商品数据失败！');
        })
    }

    //模态框
    //修改库存模态框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [modalData, setModalData] = useState(null);
    const downModal = () => {
        setIsModalOpen(false);
        setModalData(null);
    };

    //确定修改库存
    const onFinish1 = (values) => {
        setIsModalOpen(false);
        http({
            url: '/product/changeProductNum',
            method: 'post',
            data: values
        }).then(res => {
            if (res.code === 200) {
                //获取成功
                // res.data
                message.success(res.msg)
                getStu()
            }
        }).catch(err => {
            message.error('获取所有商品数据失败！');
        })
    };


    return (
        <div>
            <Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}
                initialValues={{ productBrand: "请选择", productGrounding: "请选择", productClassify1: "请选择一级分类", productClassify2: "请选择二级分类", name: '' }}
            >
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            name='name'
                            label='关键词'
                        >
                            <Input placeholder="商品名称" />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name='productBrand'//初始化动态变得数据
                            label='品牌'
                        >
                            <Select>
                                {store.productBrand.map(a => (
                                    <Option value={a}>{a}</Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item
                            name='productClassify1'//初始化动态变得数据
                            label='分类'
                        >
                            <Select>
                                {store.productClassify1.map(a => (
                                    <Option key={a.classifyID} value={a.classifyID}>{a.classifyName}</Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item
                            name='productClassify2'//初始化动态变得数据
                            label='~'
                        >
                            <Select>
                                {store.productClassify2.map(a => (
                                    <Option key={a.classifyID} value={a.classifyID}>{a.classifyName}</Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col
                        span={24}
                        style={{
                            // textAlign: 'right',
                        }}
                    >
                        <Button type="primary" htmlType="submit"
                        >
                            筛选
                        </Button>
                        <Button
                            style={{
                                margin: '0 .8rem',
                            }}
                            onClick={() => {
                                form.resetFields();
                                getStu()
                            }}
                        >
                            重置
                        </Button>

                    </Col>
                </Row>
            </Form>
            <div style={listStyle}>
                <div style={{ lineHeight: '2rem', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', height: '2rem', padding: '1rem' }}>
                    <h3>数据列表</h3>

                </div>

                <div style={{ lineHeight: '20rem', }}>
                    <Divider />
                    <Table columns={columns} dataSource={dataList}
                        pagination={{
                            pageSize: 5
                        }}
                        rowKey={record => record.productID} />
                </div>
            </div>
            {/*修改库存弹框*/}
            <Modal title="修改库存" open={isModalOpen} footer={null} onCancel={downModal} destroyOnClose="true">
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish1}
                    autoComplete="off"
                    initialValues={modalData}
                >
                    <Form.Item
                        label="商品货号"
                        name="productID"
                    >
                        <Input disabled="true" />
                    </Form.Item>

                    <Form.Item
                        label="商品名称"
                        name="productName"
                    >
                        <Input disabled="true" />
                    </Form.Item>

                    <Form.Item
                        label="商品品牌"
                        name="productBrand"
                    >
                        <Input disabled="true" />
                    </Form.Item>

                    <Form.Item
                        name='productNum'//初始化动态变得数据
                        label='库存'
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit"  className='model1'>
                            确定
                        </Button>
                        <Button type="primary" htmlType="submit" onClick={downModal}  className='model1'>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};
export default App;